<template>
  <el-table :data="columnList" row-key="id" :max-height="tableHeight">
    <el-table-column label="字段列名" min-width="10%" prop="columnName" show-overflow-tooltip />
    <el-table-column label="字段描述" min-width="10%">
      <template #default="scope">
        <el-input v-model="scope.row.columnComment" />
      </template>
    </el-table-column>
    <el-table-column label="物理类型" min-width="10%" prop="dataType" show-overflow-tooltip />
    <el-table-column label="Java类型" min-width="11%">
      <template #default="scope">
        <el-select v-model="scope.row.javaType">
          <el-option label="Long" value="Long" />
          <el-option label="String" value="String" />
          <el-option label="Integer" value="Integer" />
          <el-option label="Double" value="Double" />
          <el-option label="BigDecimal" value="BigDecimal" />
          <el-option label="LocalDateTime" value="LocalDateTime" />
          <el-option label="Boolean" value="Boolean" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="Java属性" min-width="10%">
      <template #default="scope">
        <el-input v-model="scope.row.javaField" />
      </template>
    </el-table-column>
    <el-table-column label="主键" min-width="4%">
      <template #default="scope">
        <el-checkbox
          v-if="scope.$index <= 1 && scope.row.columnName.endsWith('id')"
          v-model="scope.row.primaryKey"
          false-value="false"
          true-value="true"
          @click.prevent="handlePrimaryKeyClick(scope.row)"
        />
        <el-checkbox
          v-else
          v-model="scope.row.primaryKey"
          disabled
          false-value="false"
          true-value="true"
        />
      </template>
    </el-table-column>
    <el-table-column label="插入" min-width="4%">
      <template #default="scope">
        <el-checkbox
          v-model="scope.row.createOperation"
          false-value="false"
          true-value="true"
          :disabled="scope.row.columnName == 'id' && !scope.row.primaryKey"
        />
      </template>
    </el-table-column>
    <el-table-column label="编辑" min-width="4%">
      <template #default="scope">
        <el-checkbox
          v-model="scope.row.updateOperation"
          false-value="false"
          true-value="true"
          :disabled="scope.row.columnName == 'id' && !scope.row.primaryKey"
        />
      </template>
    </el-table-column>
    <el-table-column label="列表" min-width="4%">
      <template #default="scope">
        <el-checkbox
          v-model="scope.row.listOperationResult"
          false-value="false"
          true-value="true"
          :disabled="scope.row.columnName == 'id' && !scope.row.primaryKey"
        />
      </template>
    </el-table-column>
    <el-table-column label="查询" min-width="4%">
      <template #default="scope">
        <el-checkbox
          v-model="scope.row.listOperation"
          false-value="false"
          true-value="true"
          :disabled="scope.row.columnName == 'id' && !scope.row.primaryKey"
        />
      </template>
    </el-table-column>
    <el-table-column label="查询方式" min-width="10%">
      <template #default="scope">
        <el-select v-model="scope.row.listOperationCondition">
          <el-option label="=" value="=" />
          <el-option label="!=" value="!=" />
          <el-option label=">" value=">" />
          <el-option label=">=" value=">=" />
          <el-option label="<" value="<" />
          <el-option label="<=" value="<=" />
          <el-option label="LIKE" value="LIKE" />
          <el-option label="BETWEEN" value="BETWEEN" />
        </el-select>
      </template>
    </el-table-column>
    <!--    <el-table-column label="允许空" min-width="5%">-->
    <!--      <template #default="scope">-->
    <!--        <el-checkbox v-model="scope.row.nullable" false-value="false" true-value="true" />-->
    <!--      </template>-->
    <!--    </el-table-column>-->
    <el-table-column label="必填" min-width="5%">
      <template #default="scope">
        <el-checkbox
          :checked="!scope.row.nullable"
          @change="(value) => (scope.row.nullable = !value)"
        />
      </template>
    </el-table-column>
    <el-table-column label="显示类型" min-width="12%">
      <template #default="scope">
        <el-select v-model="scope.row.htmlType">
          <el-option label="文本框" value="input" />
          <el-option label="文本域" value="textarea" />
          <el-option label="下拉框" value="select" />
          <el-option label="单选框" value="radio" />
          <el-option label="复选框" value="checkbox" />
          <el-option label="日期控件" value="datetime" />
          <el-option label="图片上传" value="imageUpload" />
          <el-option label="文件上传" value="fileUpload" />
          <el-option label="富文本控件" value="editor" />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="字典类型" min-width="12%">
      <template #default="scope">
        <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
          <el-option
            v-for="dict in dictList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.type"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="示例" min-width="10%">
      <template #default="scope">
        <el-input v-model="scope.row.example" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import * as CodegenApi from '@/api/infra/codegen'
import * as DictTypeApi from '@/api/system/dict/dict_type'
import { PropType } from 'vue'

defineOptions({ name: 'InfraCodegenColumnInfoForm' })

const props = defineProps({
  columns: {
    type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>
    // default: () => null
  }
})

const columnList = ref<CodegenApi.CodegenColumnVO[]>([])
const tableHeight = ref(document.documentElement.scrollHeight - 284 + 'px')

const dictList = ref<DictTypeApi.DictTypeVO[]>([])
const getDictList = async () => {
  dictList.value = await DictTypeApi.getDictTypeSimpleList()
}

// 外层传入props.table的对象变更也会监听并触发columnList.value同步变更(保持与外层为同一对象)
watch(
  () => props.columns,
  (columns) => {
    if (!columns) return
    columnList.value = columns
  },
  {
    immediate: true,
    deep: true
  }
)

const handlePrimaryKeyClick = (row: CodegenApi.CodegenColumnVO) => {
  row.primaryKey = true
  columnList.value.forEach((column) => {
    if (column !== row) {
      column.primaryKey = false
    }
  })
  if (row.columnName == 'id') {
    row.updateOperation = true
    row.listOperationResult = true
  } else {
    for (let _column of columnList.value) {
      if (_column.columnName == 'id') {
        _column.updateOperation = false
        _column.listOperationResult = false
        break
      }
    }
  }
}

onMounted(() => {
  getDictList()
})
</script>

<style scoped lang="scss"></style>
